<!DOCTYPE html>
<html>
<head>
	<title>transition</title>
	<style type="text/css">
		.box {
			width:800px;
			height: 800px;
			position: absolute;
			left: 50%;
			top: 200px;
			transform: translate(-400px);
			background-color: #fafafa;
			display: flex;
		    justify-content: space-between;
		        overflow: hidden;
		}
		.box :nth-child(odd) :nth-child(odd), .box :nth-child(even) :nth-child(even) {
			background-color: #d2895ccc;
		}
		.box :nth-child(odd) :nth-child(even), .box :nth-child(even) :nth-child(odd) {
			background-color: #48c1debd;
		}
		.box-item {
			width: 150px;
			height: 800px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			transition: margin 3s,opacity 2s;
			margin-top: 0;
			opacity: 0.4;
		}
		/*.box-move :nth-child(odd) {
			margin-top: 200px;
			opacity: 1;
		}会导致box-inner也有margin
		.box-move :nth-child(even) {
			margin-top: -200px;
			opacity: 1;
		}*/
		/*.box-move > .box-item:nth(odd){color:red;}*/
		.box-move .box-item:nth-of-type(odd){
			margin-top: 200px;
			opacity: 1;
		}
		.box-move .box-item:nth-of-type(even){
			margin-top: -200px;
			opacity: 1;
		}
		.box-inner {
			padding: 50px;
		}
		/*nth-child是选全部子元素，>是一级，,，+，a~b是选择a的全部b子元素且不一定是紧跟的子元素*/
	</style>
</head>
<body>
	<div style="text-align: center;height: 2000px;width: 100%">
		before
	</div>
	<!-- 绝对定位是为了演示方法1 -->
	<div class="box" style="position: relative;">
		<div class="box-item">
			<div class="box-inner">1-1</div>
			<div class="box-inner">1-2</div>
			<div class="box-inner">1-3</div>
			<div class="box-inner">1-4</div>
			<div class="box-inner">1-5</div>
		</div>
		<div class="box-item">
			<div class="box-inner">2-1</div>
			<div class="box-inner">2-2</div>
			<div class="box-inner">2-3</div>
			<div class="box-inner">2-4</div>
			<div class="box-inner">2-5</div>
		</div>
		<div class="box-item">
			<div class="box-inner">3-1</div>
			<div class="box-inner">3-2</div>
			<div class="box-inner">3-3</div>
			<div class="box-inner">3-4</div>
			<div class="box-inner">3-5</div>
		</div>
		<div class="box-item">
			<div class="box-inner">3-1</div>
			<div class="box-inner">3-2</div>
			<div class="box-inner">3-3</div>
			<div class="box-inner">3-4</div>
			<div class="box-inner">3-5</div>
		</div>
	</div>
	<text>TODO 写腾讯微云相册（原理：背景图片+裁切的图片绝对定位和动画效果，裁切1X1,1X2,2X2三种）</text>
</body>
<script type="text/javascript">
	// 方法1
	/*window.onload = function() {
		document.querySelector('.box').className += ' box-move '
	}*/
	// 方法2懒加载
	let domList = [...document.querySelectorAll('.box')]
	let lazyLoad = (() => {
		// 实例化观察者
		let observer = new IntersectionObserver(entries => {
			// 观察配置
			entries.forEach(entry => {
				if (entry.intersectionRatio > 0) {
					entry.target.className += ' box-move '
					// 动画，仿https://creddy.ru/和腾讯微云
					// 或直接给样式
					// 取消观察
					observer.unobserve(entry.target)
				}
			})
		})
		domList.forEach(dom => {
			observer.observe(dom)
		})
	})
	lazyLoad()
</script>
</html>